<template>
	<el-dialog
        v-model="visible"
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal="false"
        :width="600">
		<el-form ref="dataFormRef"
            :model="dataForm"
            :rules="dataRules"
            label-width="100px"
            @keyup.enter="onSubmit()">
			<el-form-item label="参数名称" prop="paramName">
				<el-input v-model="dataForm.paramName" placeholder="参数名称"></el-input>
			</el-form-item>
			<el-form-item label="参数键" prop="paramKey">
				<el-input v-model="dataForm.paramKey" placeholder="参数键"></el-input>
			</el-form-item>
			<el-form-item label="参数值" prop="paramValue">
				<el-input :rows="5" v-model="dataForm.paramValue" maxlength="2000" placeholder="参数值" show-word-limit type="textarea" />
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
			</el-form-item>
			<el-form-item label="系统参数" prop="paramType">
				<el-radio-group v-model="dataForm.paramType">
					<el-radio :label="0">否</el-radio>
					<el-radio :label="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="onSubmit()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { paramStore } from '@/store/param'

const useParamStore = paramStore()

const emit = defineEmits(['refresh']) // 定义刷新事件
const visible = ref(false) // 对话框是否显示
const dataForm = reactive({ // 表单数据
	id: 0, // id
	paramName: '', // 参数名称
	paramKey: '', // 参数键
	paramValue: '', // 参数值
	paramType: 0, // 是否为系统参数
	remark: '', // 备注
})

const dataFormRef = ref(null) // 表单ref
const init = (id) => { // 初始化
	visible.value = true
	dataForm.id = 0

    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields()
    }

	if (id) { // 如果是修改
		useParamStore.getParamInfo(id).then((data) => { // 获取详情
			// console.log(res)
            Object.assign(dataForm, data) // 赋值表单数据
		})
	}
}

const dataRules = { // 表单校验规则
	paramName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }], // 参数名称
	paramKey: [{ required: true, message: '参数键不能为空', trigger: 'blur' }], // 参数键
	paramValue: [{ required: true, message: '参数值不能为空', trigger: 'blur' }], // 参数值
}
const onSubmit = async() => { // 提交表单
    if (!dataFormRef.value) return // 如果表单ref不存在，直接返回
    await dataFormRef.value.validate(async(valid) => { 
		if (valid) { 
			try {
				await useParamStore.saveParam(dataForm) // 新增或修改
				ElMessage.success('操作成功') // 提示成功
				visible.value = false // 关闭对话框
				emit('refresh') // 刷新列表	
			} catch (error) {
				ElMessage.error(error.message || '操作失败') // 提示错误信息
			}
		} else {
			ElMessage.error('请输入正确的信息') // 提示错误信息
		}
	})
	/*if (!dataForm.id) { // 如果是新增
		useParamStore.addParam(dataForm).then(() => { // 新增
			ElMessage.success('新增成功') // 提示成功
			visible.value = false // 关闭对话框
			useParamStore.getParamList() // 获取列表数据
		})
	} else { // 如果是修改
		useParamStore.updateParam(dataForm).then(() => { // 修改
			ElMessage.success('修改成功') // 提示成功
			visible.value = false // 关闭对话框
			useParamStore.getParamList() // 获取列表数据
		})
	} */
}

defineExpose({ init })
</script>

<style lang="scss" scoped>

</style>